<template>
     <!-- 新增修改弹窗 -->
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      @close="close"
      width="400px"
    >
      <el-form
        :model="dialogForm"
        :rules="rules"
        ref="form"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="所属学科" prop="subjectID" v-if="!id">
          <el-select
            v-model="dialogForm.subjectID"
            placeholder="请选择学科名称"
            style="width: 100%"
          >
            <el-option
              v-for="item in subjectNameList"
              :key="item.id"
              :label="item.label"
              :value="item.value"
              clearable
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input clearable v-model="dialogForm.tagName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
import {
  update,
  add,
  detail
} from '@/api/hmmm/tags'
export default {
  props: {
    dialogVisible: { type: Boolean, default: false },
    subjectNameList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      submitLoading: false,
      currentId: null,
      dialogForm: {
        subjectID: null,
        tagName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请至少选择一个学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      }

    }
  },
  computed: {
    title () {
      return this.dialogForm.id ? '编辑标签' : '新增标签'
    },
    id () {
      return this.$route.query?.id ? this.$route.query?.id : null
    }
  },
  created () {
    // this.getSubjectList()
    this.getTagsDetail()
  },
  methods: {
    // 标签详情页，用于回显
    async getTagsDetail (row) {
      const { data } = await detail({ id: row.id })
      this.dialogForm = data
    },
    // 提交表单校验
    async submit () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.dialogForm.id) {
            await update({ ...this.dialogForm, subjectID: this.dialogForm.subjectID })
          } else {
            console.log(this.id)
            console.log(this.dialogForm.tagName)

            await add({
              subjectID: this.dialogForm.subjectID,
              tagName: this.dialogForm.tagName
            })
          }
          this.$message.success(`${this.title}成功`)
          this.close()
          this.$emit('getList')
        } else {
          console.log('error submit!!')
          return false
        }
        this.submitLoading = false
      })
    },
    // close关闭弹窗
    close () {
      this.$emit('close')
      this.$refs.form.resetFields()
      this.dialogForm.tagName = null
      this.dialogForm.subjectID = this.$route.query?.id || null
      this.submitLoading = false
      this.dialogForm.id = null
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler: function (route) {
        console.log(route.query)
        // 对route.query的值的检测
        // 如果有 id 和 name 则去取这个字段 如果没有 undefined 也不会报错
        this.dialogForm.subjectID = route.query?.id ? route.query.id : null
        // console.log(route.query.id)
        // this.name = route.query && route.query.name
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
